﻿@model IList<ProductSpecificationModel>
@if (Model.Any())
{
        <div class="spec-container table-responsive">
            @{
                var group = Model.GroupBy(x => x.SpecificationAttributeName);
            }
            <table class="table data-table border-bottom-0">
                <colgroup>
                    <col />
                    <col />
                </colgroup>
                <tbody>
                    @foreach (var item in group)
                    {
                        <tr class="spec">
                            <td class="border-bottom border-top-0">
                                <div class="spec-name">
                                    @{
                                        var groupList = item.ToList();
                                    }
                                    @groupList[0].SpecificationAttributeName:
                                </div>
                            </td>
                            <td class="border-bottom border-top-0">
                                @{
                                    var groupList2 = item.ToList();
                                }
                                <div class="spec-value d-inline-flex w-100">
                                    @foreach (var spec in groupList)
                                    {
                                        @if (String.IsNullOrEmpty(spec.ColorSquaresRgb))
                                        {
                                            <div class="mb-2 mr-2">
                                                @Html.Raw(spec.ValueRaw)
                                            </div>
                                        }
                                        else
                                        {
                                            <div class="color-squares mb-2 mr-2">
                                                <span class="color-container" title="@Html.Raw(spec.ValueRaw)">
                                                    <span class="color" style="background-color: @(spec.ColorSquaresRgb);">&nbsp;</span>
                                                </span>
                                            </div>
                                        }
                                    }
                                </div>
                            </td>

                        </tr>
                    }
                </tbody>
            </table>
        </div>
}